<template>

    <div  style="
    overflow:  hidden;
    height:  100%;
    width: 100%;
    position:  absolute;
    top: 0;
">

       <city-header :headCities="headCities"/>
        
        <div ref="wrapper" class="wrapper">

         <div>

        <city-sort :letter="letter" @change="newClickSort"/>

        <city-list :cities="cities" ref="citylist"/>

        </div>
        </div>
     <div v-if="iftrue" class="goUp" @click="goUp"></div>
    </div>

</template>

<script>
import BScroll from 'better-scroll'

import CityHeader from '@/pages/city/components/CityHeader'

import CitySort from '@/pages/city/components/Citysort'
import CityList from '@/pages/city/components/CityList'
export default {
    name:'city',
    data(){
        return{
            letter:[],
            cities:[],
            iftrue:false,
            headCities:[]

        }
    },
    components:{
        CityHeader,
        CitySort,
        CityList
    },
    methods:{
        getCityInfo(){
            const _this = this;
            _this.$axios.get('/api/city.json').then(function(response){

                const res = response.data.data;
                
                for(var s in res.cities){

                    _this.letter.push(s)

                }

                _this.cities = res.cities
                 _this.headCities = res.cities
                
                console.log(res.cities)


            })
        },
        newClickSort(n){
            // console.log('子组件传递:',n)
            // console.log(this.$refs.citylist.$refs[n][0])
            if(n){
                const element = this.$refs.citylist.$refs[n][0];
                this.scroll.scrollToElement(element)

            }

            if(this.scroll.y < -190){

                this.iftrue = true;

            }
          
 
        },
        goUp(){

            this.scroll.scrollTo(0, 0, 500)

        }

    },
    mounted(){
        this.getCityInfo()
        this.scroll = new BScroll(this.$refs.wrapper,{
        probeType: 3,
        }) 

        const _this = this

        this.scroll.on('scroll', (pos) => {

                const MathAbs = Math.abs(pos.y)

                if( MathAbs > 190 ){
                    _this.iftrue = true;
                }else{
                    _this.iftrue = false;
                }

        })
    }

}
 
</script>

<style lang="stylus" scoped>


    .goUp
        position:absolute
        bottom:20px
        right:10px
        width:35px
        height:35px
        background:url('../../../static/goup.png') no-repeat 
        background-size:35px

    .wrapper
        position:absolute
        top 100px
        bottom 0
        width:100%
        height:100%
        overflow:hidden

</style>

